<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1425833_spyibewazhe.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/detail.css">
    <script src="./js/jquery-1.11.3.js"></script>
    <script src="./js/fangdajing.js"></script>
    <script src="./js/cookie.js"></script>
    <script src="./js/detail.js"></script>
</head>

<body>
    <!-- 消息提示 -->
    <div class="sui_tips wrap">
        <div class="sui-msg msg-large msg-success">
            <div class="msg-con">请求商品列表成功!</div>
            <s class="msg-icon"></s>
        </div>

        <div class="sui-msg msg-large msg-error">
            <div class="msg-con">请求商品列表失败!</div>
            <s class="msg-icon"></s>
        </div>

        <div class="sui-msg msg-large msg-tips">
            <div class="msg-con">确定不需要记住账号吗?</div>
            <s class="msg-icon"></s>
        </div>
    </div>

    <!-- header部分开始 -->
    <div class="header">
        <div class="top-bar wrap">
            <div class="head-lang">
                <div class="region-selection">
                    <h4 class="selected-region">中文</h4>
                    <i class="iconfont icon-xialajiantou icon-arrow"></i>
                </div>
                <div class="separate-line"></div>
                <div class="currency-selection">
                    <h4>RMB ￥</h4>
                </div>
            </div>
            <div class="head-site logged-in">
                <span class="login"><a href="javascript:void(0)">登录</a></span>
                <div class="separate-line"></div>
                <span class="register"><a href="javascript:void(0)">注册</a></span>
                <div class="separate-line"></div>
                <span class="collection"><a href="javascript:void(0)"><i
                            class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- xin"></i></a></span>
            </div>
            <div class="head-logo">
                <a href="https://www.secoo.com"><img src="./images/logo.jpg" alt=""></a>
            </div>
        </div>
        <div class="nav-bar">
            <div class="wrap">
                <ul class="nav-menu">
                    <li class="nav-item"><a href="">首页</a></li>
                    <li class="nav-item">
                        <a href="">包袋</a>
                        <div class="nav-unfold">
                            <ul class="unfold-list wrap cl">
                                <li>
                                    <h4>分类</h4>
                                    <a href="javascript:void(0)">男士包袋</a><a href="javascript:void(0)">女士包袋</a>
                                    <a href="javascript:void(0)">钱包</a><a href="javascript:void(0)">手拿包</a>
                                    <a href="javascript:void(0)">斜挎包</a><a href="javascript:void(0)">拉杆箱</a>
                                    <a href="javascript:void(0)">双肩包</a><a href="javascript:void(0)">手提包</a>
                                </li>
                                <li>
                                    <h4>品牌</h4>
                                    <a href="javascript:void(0)">爱马仕</a><a href="javascript:void(0)">香奈儿</a>
                                    <a href="javascript:void(0)">路易威登</a><a href="javascript:void(0)">古驰</a>
                                    <a href="javascript:void(0)">宝格丽</a><a href="javascript:void(0)">蔻驰</a>
                                    <a href="javascript:void(0)">范思哲</a><a href="javascript:void(0)">杜嘉班纳</a>
                                    <a href="javascript:void(0)">普拉达</a><a href="javascript:void(0)">缪缪</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="">腕表</a>
                        <div class="nav-unfold">
                            <ul class="unfold-list wrap cl">
                                <li>
                                    <h4>分类</h4>
                                    <a href="javascript:void(0)">男士</a><a href="javascript:void(0)">女士</a>
                                    <a href="javascript:void(0)">机械腕表</a><a href="javascript:void(0)">石英腕表</a>
                                </li>
                                <li>
                                    <h4>品牌</h4>
                                    <a href="javascript:void(0)">爱马仕</a><a href="javascript:void(0)">香奈儿</a>
                                    <a href="javascript:void(0)">路易威登</a><a href="javascript:void(0)">古驰</a>
                                    <a href="javascript:void(0)">宝格丽</a><a href="javascript:void(0)">蔻驰</a>
                                    <a href="javascript:void(0)">范思哲</a><a href="javascript:void(0)">杜嘉班纳</a>
                                    <a href="javascript:void(0)">真力时</a><a href="javascript:void(0)">卡地亚</a>
                                    <a href="javascript:void(0)">浪琴</a><a href="javascript:void(0)">天梭</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="">珠宝首饰</a>
                        <div class="nav-unfold">
                            <ul class="unfold-list wrap cl">
                                <li>
                                    <h4>分类</h4>
                                    <a href="javascript:void(0)">项链</a><a href="javascript:void(0)">吊坠</a>
                                    <a href="javascript:void(0)">手链</a><a href="javascript:void(0)">耳饰</a>
                                    <a href="javascript:void(0)">手镯</a><a href="javascript:void(0)">戒指/指环</a>
                                    <a href="javascript:void(0)">手串</a><a href="javascript:void(0)">串珠/配珠</a>
                                    <a href="javascript:void(0)">首饰套装</a><a href="javascript:void(0)">胸针</a>
                                    <a href="javascript:void(0)">头饰</a>
                                </li>
                                <li>
                                    <h4>品牌</h4>
                                    <a href="javascript:void(0)">梵克雅宝</a><a href="javascript:void(0)">尚美</a><a
                                        href="javascript:void(0)">蒂芙尼</a>
                                    <a href="javascript:void(0)">迪奥</a><a href="javascript:void(0)">宝格丽</a><a
                                        href="javascript:void(0)">施华洛世奇</a>
                                    <a href="javascript:void(0)">爱马仕</a><a href="javascript:void(0)">潘多拉</a> <a
                                        href="javascript:void(0)">香奈儿</a>
                                    <a href="javascript:void(0)">路易威登</a><a href="javascript:void(0)">Apm Monaco</a> <a
                                        href="javascript:void(0)">莫妮卡维娜德</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)">服饰</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)">鞋履</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)">配饰</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)">运动</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)">家居</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)">美妆</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)">生活方式</a>
                    </li>
                </ul>
                <div class="nav-search">
                    <input type="text" class="search-input" placeholder="请输入搜索内容">
                    <span class="icon-search">
                        <i class="iconfont icon-sousuo"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- header部分结束 -->

    <!-- detail部分开始 -->
    <div class="detail wrap">
        <div class="smallNav">
            <p>
                <a href="javascript:void(0)">首页</a>&gt;<a href="javascript:void(0)">女装</a>&gt;<a
                    href="javascript:void(0)">女士卫衣</a>&gt; <a href="javascript:void(0)">女卫衣</a>
            </p>
            <span>商品编码：58029465</span>
        </div>
        <div class="contents">
            <div class="info_l cl">
                <div id="box">
                    <div id="top">
                        <div id="content">
                            <img id="smallImg" draggable="false">
                            <div id="shadow"></div>
                        </div>
                        <div id="bigShadow">
                            <img id="bigImg">
                        </div>
                    </div>
                    <ul id="nav">
                        <!-- <li data-small="./images/list-bigpic1.jpg" data-big="./images/list-bigpic1.jpg">
                            <img src="./images/list-bigpic1.jpg" alt="">
                        </li>
                        <li data-small="./images/list-bigpica1.jpg" data-big="./images/list-bigpica1.jpg">
                            <img src="./images/list-bigpica1.jpg" alt="">
                        </li>
                        <li data-small="./images/list-bigpicb1.jpg" data-big="./images/list-bigpicb1.jpg">
                            <img src="./images/list-bigpicb1.jpg" alt="">
                        </li>
                        <li data-small="./images/list-bigpicc1.jpg" data-big="./images/list-bigpicc1.jpg">
                            <img src="./images/list-bigpicc1.jpg" alt="">
                        </li> -->
                    </ul>
                </div>
            </div>
            <div class="info_r cl">
                <div class="proName" id="goodsname">19年秋冬 KENZO/高田贤三 女士 混色 百搭 女士针织衫/毛衣</div>
                <div class="proDetails">
                    <div class="proList cl">
                        <div class="pdt">寺库价</div>
                        <div class="pdd">
                            <div class="Dprice" id="goodsprice">￥ 1299</div>
                        </div>
                    </div>
                    <div class="proList cl">
                        <div class="pdv">
                            有货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预计7-10个工作日内送达
                        </div>
                    </div>
                    <div class="proList cl">
                        <div class="pdv">温馨提示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本商品无质量问题不支持退换货</div>
                    </div>
                    <div class="proList cl">
                        <div class="pdv">商品信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自营</div>
                    </div>
                    <div class="proList cl last">
                        <div class="pdt">购买数量</div>
                        <input id="goodsnum" value="1">
                    </div>
                    <div class="proList cl last">
                        <button id="btn">加入购物车</button>
                        <!-- <button id="J_confirm1" class="sui-btn btn-primary btn-lg">$.confirm('xxx')</button> -->
                        <!-- <button data-toggle="modal" data-target="#myModal" data-keyboard="false"
                            class="sui-btn btn-primary btn-lg" id="btn">加入购物车</button>
                        <div id="myModal" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" data-dismiss="modal" aria-hidden="true"
                                            class="sui-close">×</button>
                                        <h4 id="myModalLabel" class="modal-title">加入购物车</h4>
                                    </div>
                                    <div class="modal-body">确定加入购物车吗?</div>
                                    <div class="modal-footer">
                                        <button type="button" data-ok="modal"
                                            class="sui-btn btn-primary btn-large">去购物车结算</button>
                                        <button type="button" data-dismiss="modal"
                                            class="sui-btn btn-default btn-large">继续购物</button>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- detail部分结束 -->

    <!-- footer部分开始 -->
    <div class="footer">
        <div class="wrap">
            <ul class="footer-links cl">
                <li class="service-information">
                    <h4 class="links-title">服务指南</h4>
                    <ul class="links-ul">
                        <li class="links-item"><a href="">Investors</a></li>
                        <li class="links-item"><a href="">物流配送</a></li>
                        <li class="links-item"><a href="">售后服务</a></li>
                        <li class="links-item"><a href="">联系我们</a></li>
                        <li class="links-item"><a href="">加入我们</a></li>
                        <li class="links-item"><a href="">帮助</a></li>
                        <li class="links-item"><a href="">寺库招商</a></li>
                    </ul>
                </li>
                <li class="public-media">
                    <h4 class="links-title">公共媒体</h4>
                    <div class="footer-logo">
                        <div class="weibo">
                            <i class="iconfont icon-weibo"></i>
                            <span class="zh">微博</span>
                        </div>
                        <div class="wechat">
                            <i class="iconfont icon-weixin"></i>
                            <span class="zh">微信</span>
                        </div>
                    </div>
                </li>
                <li class="our-app">
                    <h4 class="links-title">我们的APP</h4>
                    <ul class="app-ul">
                        <li class="links-item"><a href="">寺库商城</a></li>
                        <li class="links-item"><a href="">Try Try</a></li>
                        <li class="links-item"><a href="">寺库艺术</a></li>
                    </ul>
                </li>
            </ul>
            <div class="footer-info">
                <p>
                    <span><a href="">京公安备11010102001392</a></span>
                    <span><a href="">京ICP证110119号 京ICP备09084709号-3</a></span>
                    <span><a href="">ISO9001中国质量管理体系认证</a></span>
                    <span><a href="">出版物经营许可证</a></span>
                    <span><a href="">食品经营许可证</a></span>
                    <span><a href="">京B2-20181305</a></span>
                </p>
                <p>
                    <span>京食药网食备201810026</span>
                    <span>客服电话：400-875-6789</span>
                    <span>COPYRIGHT © 2010-2018 北京寺库商贸有限公司 版权所有</span>
                </p>
                <p class="footer-info-imgs">
                    <a href=""><img src="./images/f_01.jpg" alt=""></a>
                    <a href=""><img src="./images/kexin.jpg" alt=""></a>
                    <a href=""><img src="./images/cnnic.png" alt=""></a>
                    <a href=""><img src="./images/f_03.jpg" alt=""></a>
                </p>
            </div>
        </div>
    </div>
    <!-- footer部分结束 -->
</body>
<script>
    var searchStr = window.location.search;
    // alert(searchStr);
    var oSmallimg = document.querySelector('#smallImg');
    var oBigimg = document.querySelector('#bigImg');
    var oNav = document.querySelector('#nav');
    var goodsnameP = document.querySelector('#goodsname');
    var goodspriceP = document.querySelector('#goodsprice');
    var goodsnumInput = document.querySelector('#goodsnum');
    var oBtn = document.querySelector('#btn');
    // var J_confirm1 = document.querySelector('#J_confirm1');

    // var config = { url: "http://lk1299117937.gz01.bdysite.com/" };

    if (searchStr.includes('id')) {
        var goodsid = searchStr.split('=')[1];
        // alert(goodsid);

        oBtn.onclick = function () {
            var loginId = getCookie('loginId');
            // alert(loginId);
            if (loginId) {
                //用户登录
                //把用户和商品信息写入数据库
                var goodsname = this.goodsname;
                var goodsprice = this.goodsprice;
                var goodsimg = this.goodsimg;
                var goodsnum = goodsnumInput.value;
                // console.log(goodsnum);

                var xhr2 = new XMLHttpRequest();
                xhr2.open("get",
                    /*`http://localhost/Secoo/php/gotomyshoppingcar.php?userid=${loginId}&goodsid=${goodsid}&goodsname=${goodsname}&goodsnum=${goodsnum}&goodsprice=${goodsprice}&goodsimg=${goodsimg}`*/
                    `http://lk1299117937.gz01.bdysite.com/Secoo/php/gotomyshoppingcar.php?userid=${loginId}&goodsid=${goodsid}&goodsname=${goodsname}&goodsnum=${goodsnum}&goodsprice=${goodsprice}&goodsimg=${goodsimg}`);
                xhr2.send();
                xhr2.onreadystatechange = function () {
                    if (xhr2.readyState == 4 && xhr2.status == 200) {
                        let res = JSON.parse(xhr2.responseText);
                        if (res.code == 1) {
                            // 成功以后 提示用户是否进入购物车
                            if (confirm("进入购物车&&继续购物")) {
                                location.href = "./myshoppingcar.html"
                            } else {
                                location.href = "./goodslist.html";
                            }

                            // // $('#myModal').on('okHide', function (e) { console.log('okHide') })
                            // $('#myModal .btn-primary').on('click', function (e) { location.href = "./myshoppingcar.html" })
                            // // $('#myModal').on('cancelHide', function (e) { console.log('cancelHide') })
                            // $('#myModal .btn-default').on('cancelHidden', function (e) { location.href = "./goodslist.html"; })
                        } else {
                            $('.sui_tips .msg-error').show(1000).find('.msg-con').html(res.msg);
                            setTimeout(function () {
                                $('.sui_tips .msg-error').hide(1000);
                            }, 3000);
                        }
                    }
                }
            } else {
                //用户没有登陆
                setCookie("backUrl", window.location.href);
                window.location.href = "./login/login.html";
            }
        }

        var xhr = new XMLHttpRequest();
        xhr.open('get', /*`http://localhost/Secoo/php/detail.php?id=${goodsid}`,*/ `http://lk1299117937.gz01.bdysite.com/Secoo/php/detail.php?id=${goodsid}`);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var res = JSON.parse(xhr.responseText);
                // console.log(res);
                var { id, goodsname, goodsnum, goodsprice, smallimg, bigimg } = res;

                //把有用的数据绑定给btn 减少dom操作
                oBtn.goodsname = goodsname;
                oBtn.goodsprice = goodsprice;
                oBtn.goodsimg = `images/${smallimg}1.jpg`;

                goodsnameP.innerHTML = goodsname;
                goodspriceP.innerHTML = '￥  ' + goodsprice;

                oSmallimg.src = `images/${smallimg}1.jpg`;
                oBigimg.src = `images/${bigimg}1.jpg`;

                var html = '';
                for (var i = 1; i <= 4; i++) {
                    html += `<li data-small="images/${bigimg}${i}.jpg" data-big="images/${bigimg}${i}.jpg">
                                <img src="images/${bigimg}${i}.jpg" alt="">
                            </li>`;
                }
                oNav.innerHTML = html;
                fangDaJing();
            }
        }
    }
</script>

</html>